<template>
  <layout-content
    v-loading="uiState.loading"
    :header="$t('commons.button.create')"
    :back-to="{ name: 'Secrets' }"
  >
    <div>
      <div class="flex w-full justify-end">
        <el-button @click="onCancel()">
          {{ $t("commons.button.cancel") }}
        </el-button>
        <el-button v-if="!uiState.yaml" @click="onEditYaml()">
          {{ $t("commons.button.yaml") }}
        </el-button>
        <el-button v-if="uiState.yaml" @click="onCancelYaml()">
          {{ $t("commons.button.back_form") }}
        </el-button>
        <el-button v-loading="uiState.loading" type="primary" @click="onSubmit">
          {{ $t("commons.button.submit") }}
        </el-button>
      </div>
      <div v-if="!uiState.yaml">
        <el-form
          ref="form"
          label-position="top"
          :model="editModel"
          :rules="editRules"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                :label="$t('commons.table.name')"
                required
                prop="metadata.name"
              >
                <el-input v-model="editModel.metadata.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :label="$t('business.namespace.namespace')"
                required
                prop="metadata.namespace"
              >
                <ko-select v-model:model-value="editModel.metadata.namespace" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('business.configuration.type')" required>
                <el-select v-model="editModel.type" @change="onTypeChanged">
                  <el-option label="Opaque" value="Opaque" />
                  <el-option
                    label="Docker Registry"
                    value="kubernetes.io/dockerconfigjson"
                  />
                  <el-option
                    :label="$t('business.configuration.basic_auth')"
                    value="kubernetes.io/basic-auth"
                  />
                  <el-option
                    :label="$t('business.configuration.ssh_auth')"
                    value="kubernetes.io/ssh-auth"
                  />
                  <el-option
                    :label="$t('business.configuration.tls_auth')"
                    value="kubernetes.io/tls"
                  />
                  <!--                  <el-option :label="$t('business.configuration.token_auth')"-->
                  <!--                             value="bootstrap.kubernetes.io/token"></el-option>-->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-tabs v-model="tabType" tab-position="top" type="border-card">
                <el-tab-pane
                  v-if="editModel.type === SecretType.Opaque"
                  :name="SecretType.Opaque"
                  :label="$t('business.configuration.data')"
                >
                  <ko-secret-data v-model:dataObj="editModel.data" />
                </el-tab-pane>
                <el-tab-pane
                  v-if="editModel.type === SecretType.DockerConfigJson"
                  :name="SecretType.DockerConfigJson"
                  :label="$t('business.configuration.data')"
                >
                  <ko-secret-docker-data v-model:dataObj="editModel.data" />
                </el-tab-pane>
                <el-tab-pane
                  v-if="editModel.type === SecretType.SSHAuth"
                  :name="SecretType.SSHAuth"
                  :label="$t('business.configuration.data')"
                >
                  <ko-secret-keys v-model:data-obj="editModel.data" />
                </el-tab-pane>
                <el-tab-pane
                  v-if="editModel.type === SecretType.BasicAuth"
                  :name="SecretType.BasicAuth"
                  :label="$t('business.configuration.data')"
                >
                  <ko-secret-authentication
                    v-model:authentication-obj="editModel.data"
                  />
                </el-tab-pane>
                <el-tab-pane
                  v-if="editModel.type === SecretType.TLS"
                  :name="SecretType.TLS"
                  label="TLS"
                >
                  <ko-secret-certificate
                    v-model:certificate-obj="editModel.data"
                  />
                </el-tab-pane>
                <el-tab-pane
                  name="label"
                  :label="$t('business.workload.labels_annotations')"
                >
                  <ko-key-value
                    v-model:value="editModel.metadata.labels"
                    :title="$t('business.workload.label')"
                  />
                  <ko-key-value
                    v-model:value="editModel.metadata.annotations"
                    :title="$t('business.workload.annotations')"
                  />
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-else>
        <yaml-editor ref="yaml_editor" :value="editModel" />
      </div>
    </div>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import KoSecretData from "@/views/domain/kubeHud/views/components/ko-configuration/ko-secret-data.vue";
import YamlEditor from "@/views/domain/kubeHud/views/components/yaml-editor/index.vue";
import KoSecretDockerData from "@/views/domain/kubeHud/views/components/ko-configuration/ko-secret-docker-data.vue";
import KoSecretKeys from "@/views/domain/kubeHud/views/components/ko-configuration/ko-secret-keys.vue";
import KoSecretAuthentication from "@/views/domain/kubeHud/views/components/ko-configuration/ko-secret-authentication.vue";
import KoSecretCertificate from "@/views/domain/kubeHud/views/components/ko-configuration/ko-secret-certificate.vue";
import KoAlert from "@/views/domain/kubeHud/views/components/ko-alert.vue";
import KoKeyValue from "@/views/domain/kubeHud/views/components/ko-configuration/ko-key-value.vue";
import KoSelect from "@/views/domain/kubeHud/views/components/ko-select/index.vue";
import { useVerifyRouter } from "@/router/use";
import { reactive, ref } from "vue";
import { Secret, SecretType, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { useFormRule } from "@/views/domain/kubeHud/utils/rules";
import { ElMessageBox, ElNotification } from "element-plus";
import { useI18n } from "vue-i18n";

const router = useVerifyRouter();
const { RequiredRule } = useFormRule();
const { t } = useI18n();
const { secretRepo } = useK8SApi();

const uiState = reactive({
  yaml: false,
  loading: false
});

const editModel = ref<Secret>({
  apiVersion: "v1",
  kind: "Secret",
  metadata: {
    name: "",
    namespace: ""
  },
  data: {}
});

const editRules = ref({
  "metadata.name": [RequiredRule],
  "metadata.namespace": [RequiredRule]
});
const tabType = ref("");

const onCancel = () => router.back();

const onCancelYaml = () => {
  ElMessageBox.confirm(
    t("commons.confirm_message.back_form"),
    t("commons.message_box.prompt"),
    {
      confirmButtonText: t("commons.button.confirm"),
      cancelButtonText: t("commons.button.cancel"),
      type: "warning"
    }
  ).then(() => {
    uiState.yaml = false;
  });
};

const onSubmit = () => {
  uiState.loading = true;

  secretRepo
    .createSecret(editModel.value)
    .then(res => {
      if (!res) {
        ElNotification.error({
          title: t("commons.msg.create_failed")
        });
      }
    })
    .finally(() => {
      uiState.loading = false;
    });
};

const onTypeChanged = t => {
  if (editModel.value.data?.length > 0) {
    ElMessageBox.alert(t("commons.confirm_message.clear")).then(() => {
      editModel.value.data = {};
      tabType.value = t;
    });
  } else {
    tabType.value = t;
    editModel.value.data = {};
  }
};

const onEditYaml = () => {
  uiState.yaml = true;
};
</script>

<style scoped></style>
